<template>
  <div class="body">
    <template v-if="!initLoading">
      <template v-if="list.length > 0">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <div class="list-item-left">
            <div class="head">
              <div class="name te mr5">{{ item.name }}</div>
              <div class="mr5">{{ item.phone }}</div>
              <div class="label mr5">{{ item.label }}</div>
              <div
                class="default mr5"
                :style="{
                  background: DIYTHEME?.host_bg,
                  color: DIYTHEME?.host_color,
                }"
                v-if="item.is_default"
              >
                默认
              </div>
            </div>
            <div class="detail">
              {{ item.region.province }} {{ item.region.city }}
              {{ item.region.region }} {{ item.detail }}
            </div>
          </div>
          <div>
            <hover
            >
              <div class="edit" @click="toUpdate(item.id)">编辑</div>
            </hover>
            <hover>
              <div class="del" @click="toDel(item.id)">删除</div>
            </hover>
          </div>
        </div>
        <loadmore :visible="listPage.pullUpOn && listPage.loadmore"></loadmore>
        <nomore :visible="!listPage.pullUpOn"></nomore>
      </template>
      <div style="height: 120rpx"></div>
      <div class="save-box fixed" @click="toCreate">
        <hover>
          <div
            class="save-btn"
            :style="{
              background: DIYTHEME?.host_bg,
              color: DIYTHEME?.host_color,
            }"
          >
            添加新地址
          </div>
        </hover>
      </div>
      <empty text="暂无地址" v-if="list.length == 0" img="5"></empty>
    </template>
    <init-load v-if="initLoading"></init-load>
    <toTop @change="scrollToTop()" ref="toTopRef"></toTop>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from "vue";
import { useConfig } from "@/store";
import { listPageType, Result, ResultError } from "@/types";
import toTop from "@/components/ui/to-top/index.vue";
import loadmore from "@/components/ui/more/loadmore.vue";
import nomore from "@/components/ui/more/nomore.vue";
import {
  onLoad,
  onPageScroll,
  onPullDownRefresh,
  onReachBottom,
  onShow,
} from "@dcloudio/uni-app";
import { getUserAddressList, deletedUserAddress } from "@/api/user-address";
import { storeToRefs } from "pinia";

const { DIYTHEME } = storeToRefs(useConfig());

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const listPage = ref<listPageType>({
  page: 1,
  last: 1,
  pullUpOn: true,
  loadmore: true,
});

const list = ref<any>([]);

const toDel = (id: number) => {
  uni.showModal({
    title: "提示",
    content: "您确定要移除当前收货地址吗?",
    success: function (o) {
      o.confirm &&
        deletedUserAddress({ id })
          .then((res: Result) => {
            $utils.successMsg(res.message);
            listPage.value.page = 1;
            toInit();
          })
          .catch((err: ResultError) => {
            $utils.errorMsg(err);
          });
    },
  });
};

const toTopRef = ref<HTMLElement>();

//页面滚动执行方式
onPageScroll((e) => {
  proxy?.$refs["toTopRef"]?.scroll(e);
});

const scrollToTop = () => {
  uni.pageScrollTo({
    duration: 200,
    scrollTop: 0,
  });
};

const toInit = () => {
  var obj: any = {};
  obj.page = listPage.value.page;
  getUserAddressList(obj)
    .then((res: Result) => {
      list.value =
        listPage.value.page == 1
          ? res.data.data
          : list.value.concat(res.data.data);
      listPage.value.last = res.data.last_page;
      listPage.value.pullUpOn =
        res.data.last_page <= 1 && listPage.value.page == 1 ? false : true;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onReachBottom(() => {
  listPage.value.loadmore = true;
  if (listPage.value.page == listPage.value.last) {
    listPage.value.pullUpOn = false;
    listPage.value.loadmore = false;
  } else {
    listPage.value.page++;
    toInit();
  }
});

onPullDownRefresh(() => {
  listPage.value.page = 1;
  toInit();
});

const toCreate = () => {
  $utils.routeRedirectTo("/otherpages/user/address/create");
};

const toUpdate = (id: number) => {
  $utils.routeRedirectTo("/otherpages/user/address/create", { id: id });
};

onShow(() => {
  toInit();
});
</script>


<style scoped>
.body {
  background: var(--base-page);
  min-height: calc(100vh - 40rpx);
  padding: 20rpx 0;
}

.list-item {
  width: calc(100% - 100rpx);
  margin: 0 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 40rpx 30rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.list-item .head {
  display: flex;
  justify-content: flex-start;
  height: 60rpx;
  line-height: 60rpx;
  align-items: center;
  margin-bottom: 10rpx;
}
.list-item .head .name {
  font-size: var(--base-size-large);
  font-weight: bold;
  max-width: 180rpx;
}
.list-item .head .label {
  background: #f0f0f0;
  color: #000000;
  border-radius: 5rpx;
  height: 30rpx;
  padding: 2rpx 10rpx;
  font-size: var(--base-size-small-xx);
  line-height: 30rpx;
}
.list-item .head .default {
  border-radius: var(--base-radius-small);
  height: 30rpx;
  padding: 2rpx 10rpx;
  font-size: var(--base-size-small-xx);
  line-height: 30rpx;
}
.list-item .detail {
  width: 100%;
  color: #898989;
  font-size: var(--base-size-small);
}
.list-item-left {
  width: calc(100% - 120rpx);
}

.edit {
  height: 40rpx;
  line-height: 38rpx;
  padding: 0 15rpx;
  font-size: var(--base-size-small-x);
  background: #f0f0f0;
  border-radius: var(--base-radius-default);
}

.del {
  height: 40rpx;
  line-height: 40rpx;
  background: #f0f0f0;
  margin-top: 10rpx;
  padding: 0 15rpx;
  font-size: var(--base-size-small-x);
  border-radius: var(--base-radius-default);
}

.save-btn {
  width: calc(100% - 40rpx);
  margin: 25rpx auto;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  color: #fff;
  border-radius: var(--base-radius-default);
}

.save-box.fixed {
  position: fixed;
  width: 100%;
  height: 120rpx;
  z-index: 9999;
  left: 0rpx;
  bottom: 0rpx;
}
</style>